<template>
  <div class="main-page">
    <div class="login-form">
      <div class="explain" style="margin-top:30px;">
        <img class="logo" :src="getAssets('img/app/app-logo.png')" />
        简意家居-后台管理平台
      </div>
      <!-- 账号邮箱 -->
      <n-input
        class="form-input"
        placeholder="请输入管理员账号"
        maxlength="120"
        :allow-input="noSideSpace"
        v-model:value="loginForm.email"
        autocomplete="off"
      >
        <template #prefix>
          <img class="form-icon" :src="getAssets('img/icon/email.svg')" />
        </template>
      </n-input>
      <!-- 密码校验 -->
      <n-input
        class="form-input"
        placeholder="请输入管理员密码"
        maxlength="20"
        :allow-input="noSideSpace"
        show-password-on="click"
        v-model:value="loginForm.pwd"
        :type="inputType"
        autocomplete="off"
      >
        <template #prefix>
          <img class="form-icon" :src="getAssets('img/icon/lock.svg')" />
        </template>
      </n-input>
      <light-button
        style="text-align: center; margin-top: 20px"
        type="primary"
        btnContent="登录"
        :btnFontSize="16"
        :btnWidth="460"
        :btnHeight="56"
        :btnBorderRadius="12"
      />
      <!-- @btnClick="formStatus === 0 ? validateEmailFn(1) : loginEmailFn()" -->
    </div>
  </div>
</template>
<script setup lang="js">
import { ref, reactive, onMounted, defineAsyncComponent, computed  } from "vue";
import {
  NInput,
  // useDialog,
  useMessage,
  NPopover
} from "naive-ui";
import { getAssets, googleClientInit, fbAsyncInit, validateEmailUtil } from "@/utils/index";

const lightButton = defineAsyncComponent(() => import("@/components/base/lightButton.vue"));

/**
 * * data
 * */
const $Message = useMessage();
const loginForm = reactive({
  email: "",
  code: "",
  pwd: "",
  pwd2: ""
});

</script>
<style lang="scss" scoped>
.main-page {
  position: relative;
  width: 100%;
  min-width: 1108px;
  height: 100vh;
  min-height: 580px;
  border-radius: var(--radius-none, 0px);
  // ../../assets/img/bg/bg_1.png
  background:
    url(https://static1.weizan.cn/zhibo/static/img/weistream/home/bg_1.svg) center center / cover no-repeat,
    linear-gradient(rgb(19, 19, 19) 0% 0%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .login-form {
    width: 460px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .sign-up-icon {
      width: 200px;
    }
    .explain-title {
      color: var(---text-primary, #fff);
      text-align: center;
      font-family: Inter;
      font-size: 24px;
      font-style: normal;
      font-weight: 500;
      line-height: 32px;
      letter-spacing: -0.24px;
    }
    .explain {
      margin: 6px 0 0;
      width: 500px;
      color: var(---text-primary-2, rgba(255, 255, 255, 0.8));
      text-align: center;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      .logo {
        margin-right: 15px;
        width: 30px;
      }
    }
    .explain-2 {
      margin: 12px 0 0;
      width: 460px;
      color: var(---text-primary-2, rgba(255, 255, 255, 0.8));
      text-align: center;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
    }
    .explain-3 {
      margin: 12px 0 0;
      width: 460px;
      color: var(---text-primary-2, rgba(255, 255, 255, 0.6));
      text-align: center;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      cursor: pointer;
    }
    .code-nav {
      margin: 48px 0;
      .code-explain {
        color: var(---text-primary, #fff);
        text-align: center;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
      }
      .code-input {
        margin-top: 20px;
      }
    }
    .cutting-line {
      margin: 23px 0 20px;
    }
    .form-input-nav {
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      .email-code-nav {
        position: absolute;
        right: 20px;
        color: rgba(255, 255, 255, 0.40);
        font-size: 16px;
        font-weight: 500;
      }
    }
    .form-input {
      margin-top: 20px;
    }
    .form-item {
      margin: 20px 10px 0;
      line-height: 20px;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: var(---text-primary-4, rgba(255, 255, 255, 0.4));
      font-size: 14px;
      font-weight: 500;
      line-height: 20px; /* 142.857% */
      &.form-item-center {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      &.space-between {
        justify-content: space-between;
      }
    }
    .text-btn {
      margin: 0 10px;
      line-height: 20px;
      cursor: pointer;
      color: var(--Purple-400, var(--color-purple-400, #8d6cef));
      &:hover {
        color: #6435f1;
      }
    }
  }
  .tip {
    margin-top: 22px;
    color: var(---text-primary-4, rgba(255, 255, 255, 0.4));
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }
  .bottom-tip {
    position: absolute;
    bottom: 32px;
    .btn {
      cursor: pointer;
      &:hover {
        color: #6435f1;
      }
    }
  }
}
.email-code-explain {
  position: relative;
  display: flex;
  align-items: center;
}
.icon-reset {
  margin-top: 16px;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}
</style>